import html2canvas from "html2canvas"; // 截图软件引入
import { Loading } from 'element-ui';

// 截图操作函数
function mkImage(style) {
  return new Promise(resolve => {
    const div = document.createElement("div");
    div.style.height = style.height;
    div.style.paddingTop =
      parseInt(style.height.slice(0, -2)) / 2 - 200 + "px";
    div.style.width = style.width;
    div.style.background = "rgba(33, 33, 33, 0.498039)";
    div.style.position = "fixed";
    div.style.zIndex = 999999;
    div.style.textAlign = "center";
    div.id = "dialog";
    return resolve(div);
  });
}
// 获取元素css函数
function calStyle(el) {
  const style = document.defaultView.getComputedStyle(el, null);
  return style;
}
export function screenshot(params) {
  const el = params.el;
  const showel = document.getElementById(params.insertEl);
  const style = calStyle(showel); // 计算展示元素样式
  mkImage(style).then(el => {
    showel.insertBefore(el, showel.childNodes[0]);
  });
  const loading = Loading.service({
    lock: true,
    text: '正在截屏，请稍后',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)',
    customClass:'screenshotLoadingClass'
  });
  // this.$nextTick(() => {
  html2canvas(document.getElementById(params.el), {
    scale: 1,
    logging: false,
    allowTaint: false,
    useCORS: true,
    removeContainer: true
  }).then(canvas => {
    loading.close();

    const temlate = document.createElement("div");
    temlate.id = "temlate";
    temlate.style.margin = "0 auto";
    document.getElementById("dialog").appendChild(temlate);
    const image = canvas.toDataURL("image/png");

    const imageEl = `<img width='520px' src=${image} />`;
    document.getElementById("temlate").innerHTML = imageEl;
    // const save = document.createElement("button");
    // save.innerText = "保存图片";
    // save.style.background = "#1f77b4";
    // save.style.padding = "5px 10px";
    // save.style.marginRight = "50px";
    // save.style.color = "#fff";
    // save.style.border = "none";
    // save.id = "save";
    const cancel = document.createElement("button");
    cancel.innerText = "取消";
    cancel.style.background = "#F56C6C";
    cancel.style.marginRight = "50px";
    cancel.style.padding = "5px 10px";
    cancel.style.color = "#fff";
    cancel.style.border = "none";
    cancel.id = "cancel";
    const down = document.createElement("button");
    down.innerText = "下载图片";
    down.style.background = "#1f77b4";
    down.style.padding = "5px 10px";
    down.style.color = "#fff";
    down.style.border = "none";
    down.id = "down";
    const br = document.createElement("div");
    document.getElementById("temlate").appendChild(br);
    document.getElementById("temlate").appendChild(cancel);
    // document.getElementById("temlate").appendChild(save);
    document.getElementById("temlate").appendChild(down);
    // 图片操作绑定事件
    // 保存图片
    // document.getElementById("save").addEventListener(
    //   "click",
    //   () => {
    //     this.$emit("saveImage", image);
    //   },
    //   true
    // );
    // 取消操作
    document.getElementById("cancel").addEventListener(
      "click",
      () => {
        // document.getElementById("save").removeEventListener("click", () => {
        //   return;
        // });
        document
          .getElementById("cancel")
          .removeEventListener("click", () => {
            return;
          });
        document.getElementById("down").removeEventListener("click", () => {
          return;
        });
        document.getElementById("dialog").remove();
      },
      true
    );
    // 下载操作
    document.getElementById("down").addEventListener(
      "click",
      () => {
        // 下载之后把创建的元素删除
        canvas.toBlob(function (blob) {
          const eleLink = document.createElement('a');
          eleLink.download = "";
          eleLink.style.display = 'none';
          // 字符内容转变成blob地址
          eleLink.href = URL.createObjectURL(blob);
          // 触发点击
          document.body.appendChild(eleLink);
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
        }, 'image/png', 1);

        document.getElementById("dialog").remove();
      },
      true
    );
  });
}

// 全屏放大函数
export function fullScreen(id) {
  let element = document.getElementById("map");
  element = document.getElementById(id);
  // 确定全屏显示元素
  const requestMethod =
    element.requestFullScreen ||
    element.webkitRequestFullScreen ||
    element.mozRequestFullScreen ||
    element.msRequestFullScreen;
  requestMethod.call(element);
}
